<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
          <el-form-item label="名称">
            <el-input v-model="formInline.name" clearable placeholder="请输入名称" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />创建调度</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <ykhttb ref="httbRef" :btn-is-show="btnIsShow"
      width="250" 
     :table-col="tabUserList"
      :table-data="tableUserData"
      @getDataDetileInfo="getDataDetileInfo"
      @deleteSelectData="deleteSelectData"
      @refresh="getUserList" />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
      <!-- 名称和路径必输 -->
      <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
        <el-form-item label="名称" prop="dispatchName">
          <el-input :disabled="disFlag" v-model="ruleForm['dispatchName']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="Cron表达式" prop="cron">
          <el-input :disabled="disFlag" v-model="ruleForm['cron']" @focus="innerVisible=true" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="备注" prop="comments">
          <el-input :disabled="disFlag" v-model="ruleForm['comments']" clearable placeholder="" />
        </el-form-item>
      </el-form>
      <div style="text-align: center;">
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('return')">返回</el-button>
      </div>


      <el-dialog
        width="40%"
        title="Cron表达式"
        :visible.sync="innerVisible"
        append-to-body>
        <crontag @fill="getValue" @hide="getValue('false')"></crontag>
        <!-- <corn @change="changeCron" @close="cronPopover=false" i18n="cn"></corn> -->
      </el-dialog>
    </el-dialog>
    
  </div>
</template>

<script>
import { dispatchpage, dispatchsave, dispatchdelete } from '@/api/zt/index'
import experiment from '@/mixins/experiment'
import crontag from '@/views/components/vue-cron-master/Crontab/index.vue'

import { quillEditor } from 'vue-quill-editor'
// import {corn} from 'vue-cron';

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor,crontag
  },
  mixins: [experiment],
  data() {
    return {
      innerVisible:false,
      isShow: false,
        cron:'',
      btnIsShow: {
        operate:true,
        detile: true,
        del: true
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      title: '新增',
      rules: {
        dispatchName: [
            { required: true, message: '请输入名称', trigger: 'change' }
        ],
        cron: [
            { required: true, message: '请输入Cron表达式', trigger: 'change' }
        ]
      },
      dialogTableVisible: false,
      ruleForm: {
        "comments": "",
        "createTime": "",
        "cron": "",
        "dispatchName": "",
        "id": 0,
        "spare1": "",
        "spare2": "",
        "updateTime": ""
      },
      userId: '',
      formInline: {
        name: ''
      },
      addParms: [],
      addParms2: [],
      tableUserData: [],
      tabUserList: [
        {
          key: 'dispatchName',
          title: '名称'
        },
        {
          key: 'cron',
          title: 'cron表达式'
        },
        {
          key: 'comments',
          title: '备注'
        },
        {
          key: 'createTime',
          title: '创建时间'
        }
      ],
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    changeCron(val){
        this.cron=val
      },
    deleteSelectData(v) {
      const ids =[v.id] 
      dispatchdelete(ids).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.errorDialog(res.msg)
        }
      })
    },
    deleteParams(i) {
      const a = JSON.parse(JSON.stringify(this.addParms))
      a.splice(i, 1)
      this.addParms = JSON.parse(JSON.stringify(a))
    },
    deleteParams2(i) {
      const a = JSON.parse(JSON.stringify(this.addParms2))
      a.splice(i, 1)
      this.addParms2 = JSON.parse(JSON.stringify(a))
    },
    addParamsFun() {
      this.addParms.push({ key1: '', key2: '', key3: '' })
    },
    addParamsFun2() {
      this.addParms2.push({ key1: '', key2: '' })
    },
    handleNodeClick(data) {
      console.log(data)
    },
    commitFromData() {
      dispatchsave(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })

        return 
      if (this.ruleForm.hasOwnProperty('id')) {
        dispatchsave(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        // dispatchsave(this.ruleForm).then(res => {
        //   if (res.code == 200) {
        //     this.getUserList()
        //   } else {
        //     this.errorDialog(res.msg)
        //   }
        // })
      }
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      this.dialogTableVisible = false
      this.$refs.httbRef.isShowLoading(true)

      dispatchpage({
        'pageIndex': this.page,
        'pageSize': this.size,
        'or_orderby_createTime':'dsc',
        'sk_like_dispatchName': this.formInline.name
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
      this.$refs.httbRef.isShowLoading(false)

      })
    }
  }
}
</script>

    <style lang="scss" scoped>
    .addcs{
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
    }
    .addcs2 .el-select {
      display: inline-block;
      width: 240px;
    }
    .autoInput{
      display: inline-block;
      width: 70%;
    }
    .autoClass{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .el-form-item{
        width:50%;
      }
    }
    .infoTitle{
      border-bottom:1px solid #e5e5e5;
      margin-bottom: 30px;
      position: relative;
    }
    .infoTitle>span{
      position: absolute;
      left: 20px;
      background: #fff;
      width:80px;
      top:-15px;
      height:30px;
      text-align: center;
      line-height: 30px;
    }
      .el-select{
        width:100%;
      }
      .timing{
        background:#fff;
        padding:20px;
      }
    </style>
